<template>
  <div>
    <el-dialog
      title="员工导入"
      :visible="visible"
      width="500px"
      @close="handleClose"
    >
      <!-- <el-upload
        class="upload-demo"
        drag
        action="https://jsonplaceholder.typicode.com/posts/"
        accept=".xlsx, .xls"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload> -->
      <div
        ref="main"
        class="main"
        @drop="handleDrag($event)"
        @dragover="handleDrag($event)"
      >
        <div class="top"><i class="el-icon-upload" /></div>
        <div class="middle">
          <el-button type="text" @click="importEmployeeTem">
            下载导入模板
          </el-button>
        </div>
        <div class="bottom">
          <p>
            将文件拖到此处或&nbsp;<el-button
              type="text"
              @click="$refs.upload.click()"
            >点击上传<input
              ref="upload"
              type="file"
              accept=".xlsx, .xls"
              style="display: none"
              @change="uploadEmployeeExcel($event)"
            ></el-button>
          </p>
        </div>
      </div>
      <div class="r-bottom">
        <el-button
          type="primary"
          size="mini"
          @click="handleClose"
        >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  importEmployeeTemRequest,
  uploadEmployeeExcelRequest
} from '@/api/employee'
import { saveAs } from 'file-saver'
export default {
  name: 'ImportDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    },
    // 下载导入模板
    async importEmployeeTem() {
      const res = await importEmployeeTemRequest()
      saveAs(res, '员工导入模板.xlsx')
    },
    // 点击上传员工列表
    uploadEmployeeExcel(e) {
      const file = e.target.files[0]
      if (!file) {
        return
      }
      this.uploadFile(file)
      this.$refs.upload.value = ''
    },
    // 文件拖拽上传触发事件
    // 需要绑定多个事件同时来确保事件的触发
    handleDrag(e) {
      // 阻止默认事件
      e.preventDefault()
      // 判断文件是否在区域内松开鼠标
      if (e.type === 'drop') {
        if (
          // 判断文件类型
          e.dataTransfer.files[0].type ===
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
          e.dataTransfer.files[0].type === 'application/vnd.ms-excel'
        ) {
          this.uploadFile(e.dataTransfer.files[0])
          e.dataTransfer.clearData()
        } else {
          this.$message.error('文件类型不正确')
          return
        }
      }
    },
    // 上传文件
    async uploadFile(data) {
      const formData = new FormData()
      formData.append('file', data)
      const res = await uploadEmployeeExcelRequest(formData)
      this.$message.success(res.message)
      this.$emit('import-success')
      this.handleClose()
    }
  }
}
</script>
<style lang='scss' scoped>
.el-dialog {
  .main {
    margin: 0 40px;
    border: 1px dashed #ccc;
    padding: 20px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    &:hover {
      border-color: #409eff;
    }
    .top {
      i {
        font-size: 60px;
        color: #ccc;
      }
    }
    .middle {
      margin: 10px 0;
    }
    .bottom {
      p {
        margin: 0;
        color: #999;
      }
    }
  }
  .r-bottom {
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
